window.onload = function () {


    let nav = document.querySelector("#nav");

    let navl=window.getComputedStyle(nav,null).height.slice(0,-2);
    let navtop = nav.offsetTop;
    let navc = nav.children[1].children;
    let pingjia = document.querySelector(".pingjia");
    let xihuan = document.querySelector(".xihuan");
    let jieshao = document.querySelector(".jieshao");

    let jieshaoe = jieshao.children;
    let spcontent = document.querySelector(".sp-content");
    let canshu = document.querySelector(".canshu");
    let shuoming = document.querySelector(".shuoming");
    let he = [spcontent, canshu, shuoming]
    let max = document.querySelector(".max");
    let tan = document.querySelector(".tan");
    let tanju = tan.offsetTop;
    let ze = document.querySelector(".ze")
    let gray = document.querySelector("#guanbi")
    tan.addEventListener("touchstart", () => {
        ze.classList.remove("none")
    })
    gray.addEventListener("touchstart", () => {
        ze.classList.add("none")
    })
    let sl = [juli(max).top, juli(pingjia).top, juli(xihuan).top, juli(jieshao).top];
    for (var i = 0; i < navc.length; i++) {
        navc[i].index = i;
        navc[i].addEventListener("touchstart", function () {
            for (var i = 0; i < navc.length; i++) {
                navc[i].classList.remove("jianb");
            }
            var sc = document.documentElement.scrollTop;
            var t = sl[this.index] - navl;
            var time;
            if (sc > t) {
                time = setInterval(function () {
                    sc -= 15;
                    if (sc <= t) {
                        clearInterval(time)
                    }
                    if (sc <= 1) {
                        nav.style.opacity = "0";
                    }
                    document.documentElement.scrollTop = sc;
                }, 20)

            } else {
                time = setInterval(function () {
                    sc += 15;
                    if (sc >= t) {
                        clearInterval(time)
                    }

                    document.documentElement.scrollTop = sc;
                }, 10)
            }
            this.classList.add("jianb")
        })
    }

    for (var i = 0; i < jieshaoe.length; i++) {
        jieshaoe[i].index = i
        jieshaoe[i].addEventListener("touchstart", function () {
            for (var k = 0; k < jieshaoe.length; k++) {
                jieshaoe[k].classList.remove("jianb")
                jieshaoe[k].classList.remove("fb")
                he[k].classList.add("none")
            }
            this.classList.add("jianb")
            this.classList.add("fb")
            he[this.index].classList.remove("none")
        })
    }
    document.body.addEventListener("touchmove", function () {
        if (document.documentElement.scrollTop > navtop) {
            nav.style.opacity = "1";
            nav.style.transition = "all 1s";
        } else {
            nav.style.opacity = "0";
        }


        for (let i = 0; i < sl.length; i++) {
            if (document.documentElement.scrollTop >= sl[i]) {
                for (var q = 0; q < sl.length; q++) {
                    navc[q].classList.remove("jianb");
                }
                navc[i].classList.add("jianb");
            }
        }

        if (document.documentElement.scrollTop >= tanju) {
            tan.style.visibility = "visible"
        } else {
            tan.style.visibility = "hidden"
        }

    }
    )
    max.addEventListener("touchstart", function (e) {
        q = e.changedTouches[0].clientX;


    })
    var zong = 0;
    var q;
    var leng = max.children[0].children.length - 1;
    var dian = max.children[3].children[0]
    max.addEventListener("touchend", function (e) {
        var z = e.changedTouches[0].clientX;
        var m = z - q;

        if (m < 0) {
            zong++;
            if (zong > leng) {
                zong = leng;
            }
            max.children[0].style.left = -zong * 3.2 + "rem";
            dian.innerText = zong + 1;
        } else {
            zong--;
            if (zong < 0) {
                zong = 0;
            }
            max.children[0].style.left = -zong * 3.2 + "rem";
            dian.innerText = zong + 1;
        }
    })

    var xihuan1 = xihuan.children[1].children[0];
    var xihuan2 = xihuan.children[1];
    var xihuan3 = xihuan.children[1].children[1].children;
    var xihuanleng = xihuan.children[1].children[0].children.length - 1;


    xihuan2.addEventListener("touchstart", function (e) {
        w = e.changedTouches[0].clientX;


    })
    var zon = 0;
    var w;

    xihuan2.addEventListener("touchend", function (e) {
        var z = e.changedTouches[0].clientX;
        var m = z - w;
        console.log(m)
        if (m < 0) {
            zon++;
            if (zon > xihuanleng) {
                zon = xihuanleng;
            }
            for (var i = 0; i < xihuan3.length; i++) {
                xihuan3[i].classList.remove("bgRed")
            }
            xihuan3[zon].classList.add("bgRed");
            xihuan1.style.left = -zon * 2.84 + "rem";
            xihuan1.style.transition = "all 1s";
        } else {
            zon--;
            if (zon < 0) {
                zon = 0;
            }

            for (var i = 0; i < xihuan3.length; i++) {
                xihuan3[i].classList.remove("bgRed")
            }
            xihuan3[zon].classList.add("bgRed");
            xihuan1.style.transition = "all 1s";
            xihuan1.style.left = -zon * 2.84 + "rem";

        }
    })

    let zhong = document.querySelector("#zhong").children;

    function daojis() {
        let time = new Date();
        const start = new Date(new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1);

        let t = (start - time) / 1000;
        let shi = bu(parseInt(t / 3600));
        let fen = bu(parseInt(t % 3600 / 60));
        let miao = bu(parseInt(t % 60));
        zhong[1].innerText = shi;
        zhong[3].innerText = fen;
        zhong[5].innerText = miao;
        function bu(l) {
            return l < 10 ? "0" + l : l;
        }
    }
    setInterval(daojis, 500);


    function juli(ele) {
    
        var l = 0;
        var t = 0;
        while (ele.offsetParent) {
         

            l += ele.offsetLeft + ele.offsetParent.clientLeft;
            t += ele.offsetTop + ele.offsetParent.clientTop;
            ele = ele.offsetParent;
           

        }
        return {
            left: l,
            top: t
        }
    }
}